<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
	<link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
	<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
	<script type="text/javascript" src="jquery/bs_pagination/en.js"></script>

<script type="text/javascript">

	$(function(){
		//操作模态窗口
		$(".Time").datetimepicker({
			minView: "month",
			language:  'zh-CN',
			format: 'yyyy-mm-dd',
			autoclose: true,
			todayBtn: true,
			pickerPosition: "bottom-left"
		});
		$("#addBtn").click(function () {
			$(".time").datetimepicker({
				minView: "month",
				language:  'zh-CN',
				format: 'yyyy-mm-dd',
				autoclose: true,
				todayBtn: true,
				pickerPosition: "bottom-left"
			});




			/*
            *
            * show 打开 hide 隐藏
            * */
            // alert("打开");
			//$("#createActivityModal").modal("show");

			//走后台 获取用户列表
			$.ajax({
				url:"workbench/activity/getUserList.do",
				type:"get",
				dataType:"json",
				success:function (data) {

					/*
					* 返回List<User> ulist
					* */
					var html = "<option></option>";

					//遍历出来的每一个n 就是一个用户
					$.each(data,function (i,n) {

						html+= "<option value='"+n.id+"'>"+n.name+"</option>"

					})

					$("#create-owner").html(html);


					//在js中使用el表达式
					var id="${user.id}";
					//将当前用户为默认选项
					$("#create-owner").val(id);



					//打开模态窗口
					$("#createActivityModal").modal("show");

				}



			})






		})

		//saveBtn绑定时间执行添加操作
		$("#saveBtn").click(function () {
			alert("点击保存");
			$.ajax({
				url:"workbench/activity/save.do",
				data:{
					"owner":$.trim($("#create-owner").val()),
					"name":$.trim($("#create-name").val()),
					"startDate":$.trim($("#create-startDate").val()),
			        "endDate":$.trim($("#create-endDate").val()),
					"cost":$.trim($("#create-cost").val()),
					"description":$.trim($("#create-description").val())
				},
				type:"post",
				dataType:"json",
				success:function (data) {
					//添加成功
					if (data.success){
						//关闭窗口
						alert("添加成功");



						//关闭前清空数据
						/*
						* 表单数据清空方式 （虽然有reset()方法 但jquery不能直接用
						* 需要转化为原生 js 有清空方法reset()
						* ）
						* jquery对象 -->转化为document对象
						* jquery对象[下标]
						* 转化为document对象 -->jquery对象
						*
						* $(dom)
						* */

						//pageList(1,2);

						/*
						pageList($("#activityPage").bs_pagination('getOption', 'currentPage')
						操作后停留当前页


				,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));
				       设置的展项的记录数

				       直接可以使用



						*/


						pageList(1,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));



						//需要时打开
						$("#activityAddForm")[0].reset();


						$("#createActivityModal").modal("hide");
					}else {
						alert("添加是市场活动失败");
					}

				}

			})

		})

		//页面加载完毕触发一个方法
		pageList(1,2);

		//为查询按钮绑定事件，出发pageList()方法
		$("#searchBtn").click(function () {

			//点击查询按钮的时候将 条件保存起来 保存到隐藏域中

			$("#hidden-name").val($.trim($("#search-name").val()));
			$("#hidden-owner").val($.trim($("#search-owner").val()))
			$("#hidden-startDate").val($.trim($("#search-startDate").val()))
			$("#hidden-endDate").val($.trim($("#search-endDate").val()))

			pageList(1,2);

		})

		//为全的复选框绑定事件，触发全选

		$("#qx").click(function () {

			$("input[name=xz]").prop("checked",this.checked);

		})
		//以下方法不行
	/*	$("input[name=xz]").click(function () {

		})*/
		//动态生成的原宿，不能以普通的形式来操作

		/*
		动态生成的需要以on方法来触发
		语法
		   $(需要绑定的有效外层元素[不是动态生成的]).on()

		*/
		$("#activityBoday").on("click",$("input[name=xz]"),function () {

			$("#qx").prop("checked",$("input[name=xz]").length==$("input[name=xz]:checked").length);
		})


		//未删除按钮绑定事件 ，删除市场活动
		$("#deleteBtn").click(function () {

			//找到复选框被选中的jquery
			var $xz = $("input[name=xz]:checked");
			if ($xz.length==0){
				alert("请选择需要删除的对象");
				//$xz.length!=0选择了
			}else {

				if (confirm("确定删除所选的记录吗？")){



				//url:workbench/activity/delete.do?id=""&id=""
				//alert("删除");
				//拼接参数
				var param="";
				//将$zx中的每一个dom对象遍历出来，取其value值
				for (var i=0;i<$xz.length;i++){
					param += "id="+$($xz[i]).val();

					//不是最后一个添加and &
					if (i<$xz.length-1){
						param += "&";
					}

				}
				//alert(param);
				$.ajax({
					url:"workbench/activity/delete.do",
					data:param,
					type:"post",
					dataType:"json",
					success:function (data) {
						if (data.success){
							//删除后

							pageList(1,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));


						}else {
							alert("删除市场活动失败");
						}

					}



				})



			}
			}

		})

		//为修改按钮绑定事件，打开修改操作的模态窗口
		$("#editBtn").click(function () {

			//命名加$ 为了区分dom

			var $xz = $("input[name=xz]:checked");

			if ($xz.length==0){
				alert("请选择需要修改的记录");

			}else if ($xz.length>1) {
				alert("只能选择一条记录进行修改")

			}else {
				//alert("1");
				var id = $xz.val();
			//	alert("2");
				$.ajax({
					url:"workbench/activity/getUserListAndActivity.do",
					data:{
						"id":id
					},
					type:"get",
					dataType:"json",
					success:function (data) {
						/*
						* data
						* 用户列表
						* 市场活动对象
						*
						* {"ulist":[{},{}],"a":{}}
						* */
						//alert("3");
						//处理下拉框
						var html = "<option></option>"

						$.each(data.uList,function (i,n) {
							html+= "<option value='"+n.id+"'>"+n.name+"</option>"
						})

					//	alert("4");
						$("#edit-owner").html(html);

						//处理单条activity
						$("#edit-id").val(data.a.id);
						$("#edit-name").val(data.a.name);
						$("#edit-owner").val(data.a.owner);
						$("#edit-startDate").val(data.a.startDate);
						$("#edit-endDate").val(data.a.endDate);
						$("#edit-cost").val(data.a.cost);
						$("#edit-description").val(data.a.description);
						//数据取完 打开模态窗口
						$("#editActivityModal").modal("show");

					}



				})
			}

		})


		//为更新按钮添加绑定事件，执行市场活动的修改
		/*
		在实际项目开发中，一定按照先做添加，在做修改

		修改一般是copy添加

		 */

		$("#updateBtn").click(function () {

			$.ajax({
				url:"workbench/activity/update.do",
				data:{
					"id":$.trim($("#edit-id").val()),
					"owner":$.trim($("#edit-owner").val()),
					"name":$.trim($("#edit-name").val()),
					"startDate":$.trim($("#edit-startDate").val()),
					"endDate":$.trim($("#edit-endDate").val()),
					"cost":$.trim($("#edit-cost").val()),
					"description":$.trim($("#edit-description").val())
				},
				type:"post",
				dataType:"json",
				success:function (data) {
					//添加成功
					if (data.success){
						//关闭窗口
						alert("修改成功");
						//pageList(1,2);

						//维持当前页和展示记录数
						pageList($("#activityPage").bs_pagination('getOption', 'currentPage')
								,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));



						$("#editActivityModal").modal("hide");
					}else {
						alert("修改是市场活动失败");
					}

				}

			})

		})



	});

	/*
	  对于所有关系型数据库，作前端分页相关操作的基础组件
	  就是pageNo 和 pageSize
	  pageNo :页码
	  pageSize:每页展现记录数

	  pageList(pageNo,pageSize)
	  方法发出ajax请求 从后台取得数据

	  在什么情况下刷新列表
	  1.点击是市场活动
	  2.添加修改删除后
	  3.点击查询
	  4.点击分页组件

	  以上为pageList方法制定了6个接口

 	 */

	function pageList(pageNo,pageSize) {

		//将全选的复选框去掉
		$("#qx").prop("checked",false);


		//查询前，将隐藏于中的条件取出来，到搜索框中
		$("#search-name").val($.trim($("#hidden-name").val()));
		$("#search-owner").val($.trim($("#hidden-owner").val()))
		$("#search-startDate").val($.trim($("#hidden-startDate").val()))
		$("#search-endDate").val($.trim($("#hidden-endDate").val()))


		//alert("展现市场活动列表");
		$.ajax({

			url:"workbench/activity/pageList.do",
			data:{
				"pageNo":pageNo,
				"pageSize":pageSize,
				"name":$.trim($("#search-name").val()),
				"owner":$.trim($("#search-owner").val()),
				"startDate":$.trim($("#search-startDate").val()),
				"endDate":$.trim($("#search-endDate").val())

			},
			type:"get",
			dataType:"json",
			success:function (data) {
				/*
				* data
				* [{市场活动1}，{市场活动2}]==List<Activity> alist
				*
				* 分页插件需要的总记录数
				* {"total":100} int total
				* {"total":100,"dataList"[{市场活动1}，{市场活动2}，......]}
				* */
				var html = "";

				$.each(data.dataList,function (i,n) {

				    html+='<tr class="active">'
					html+='<td><input type="checkbox" name="xz" value="'+n.id+'"/></td>'
					html+='<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'workbench/activity/detail.do?id='+n.id+'\';">'+n.name+'</a></td>'
					html+='<td>'+n.owner+'</td>'
					html+='<td>'+n.startDate+'</td>'
					html+='<td>'+n.endDate+'</td>'
					html+='</tr>'


				})

				//拼接html
				$("#activityBoday").html(html);

				//计算总页数
				var totalPages = data.total%pageSize==0?data.total/pageSize:parseInt(data.total/pageSize)+1;

				//数据处理完毕后结合分页插件 展示分页信息
				$("#activityPage").bs_pagination({
					currentPage: pageNo, // 页码
					rowsPerPage: pageSize, // 每页显示的记录条数
					maxRowsPerPage: 20, // 每页最多显示的记录条数
					totalPages: totalPages, // 总页数
					totalRows: data.total, // 总记录条数

					visiblePageLinks: 3, // 显示几个卡片

					showGoToPage: true,
					showRowsPerPage: true,
					showRowsInfo: true,
					showRowsDefaultInfo: true,
					//该回调函数是在点击分页组件时调用
					onChangePage : function(event, data){
						pageList(data.currentPage , data.rowsPerPage);
					}
				});



			}



		})




	}


	
</script>
</head>
<body>
  <!--使用隐藏域保存查询条件-->
  <input type="hidden" id="hidden-name"/>
  <input type="hidden" id="hidden-owner"/>
  <input type="hidden" id="hidden-startDate"/>
  <input type="hidden" id="hidden-endDate"/>


	<!-- 创建市场活动的模态窗口 -->
	<div class="modal fade" id="createActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" id="activityAddForm" role="form">
					
						<div class="form-group">
							<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-owner">

								</select>
							</div>
                            <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-name">
                            </div>
						</div>
						
						<div class="form-group">
							<label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="create-startDate">
							</div>
							<label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="create-endDate">
							</div>
						</div>
                        <div class="form-group">

                            <label for="create-cost" class="col-sm-2 control-label">成本</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-cost">
                            </div>
                        </div>
						<div class="form-group">
							<label for="create-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-description"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">

					<!--
					 保存
					-->
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="saveBtn">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改市场活动的模态窗口 -->
	<div class="modal fade" id="editActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">
						<input type="hidden" id="edit-id">
					
						<div class="form-group">
							<label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-owner">

								</select>
							</div>
                            <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="edit-name" value="发传单">
                            </div>
						</div>

						<div class="form-group">
							<label for="edit-startTime" class="col-sm-2 control-label time">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-startDate" value="2020-10-10">
							</div>
							<label for="edit-endTime" class="col-sm-2 control-label time">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-endDate" value="2020-10-20">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-cost" class="col-sm-2 control-label">成本</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-cost" value="5,000">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<!--
								文本域textarea
								1.一定是以标签对的形式存在，正常是紧紧挨着的
								2.textarea以便签对的形式存在但也是表单元素
								用val()方法



								-->
								<textarea class="form-control" rows="3" id="edit-description"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="updateBtn">更新</button>
				</div>
			</div>
		</div>
	</div>
	
	
	
	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>市场活动列表</h3>
			</div>
		</div>
	</div>
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="search-name">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text" id="search-owner">
				    </div>
				  </div>


				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">开始日期</div>
					  <input class="form-control Time" type="text" id="search-startDate" />
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">结束日期</div>
					  <input class="form-control Time" type="text" id="search-endDate">
				    </div>
				  </div>
				  
				  <button type="button" id="searchBtn" class="btn btn-default">查询</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
					<!-- 操作模态窗口-->
				  <button type="button" id="addBtn" class="btn btn-primary" ><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" id="editBtn"  class="btn btn-default" data-toggle="modal" ><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" id="deleteBtn" class="btn btn-danger"><span class="glyphicon glyphicon-minus" ></span> 删除</button>
				</div>
				
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" id="qx"/></td>
							<td>名称</td>
                            <td>所有者</td>
							<td>开始日期</td>
							<td>结束日期</td>
						</tr>
					</thead>
					<tbody  id="activityBoday">
						<%--<tr class="active">
							<td><input type="checkbox" /></td>
							<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='workbench/activity/detail.jsp';">发传单</a></td>
                            <td>zhangsan</td>
							<td>2020-10-10</td>
							<td>2020-10-20</td>
						</tr>
                        <tr class="active">
                            <td><input type="checkbox" /></td>
                            <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">发传单</a></td>
                            <td>zhangsan</td>
                            <td>2020-10-10</td>
                            <td>2020-10-20</td>
                        </tr>--%>
					</tbody>
				</table>
			</div>
			
			<div style="height: 50px; position: relative;top: 30px;">
				<!--分页-->
				<div id="activityPage"></div>

			</div>
			
		</div>
		
	</div>
</body>
</html>